{% extends "base.html" %}

{% block title%}
Izbirni predmeti
{% endblock %}

{% block js %}
<script type="text/javascript" src="{{ MEDIA_URL }}js/search.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery.drag_drop_multi_select_alpha.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    //skrijem predmete na podlagi izbranih modulov
    $("#selected_modules li").each(function(index,el){
      module_id = $(el).attr("id");
      $("."+module_id).hide();
    });
    //skrijem module na podlagi izbranih predmetov
    $("#selected_subjects li").each(function(index,el){
      module_id = $(el).attr("module_id");
      $("#"+module_id).hide();
    });
    
    // Set the default function
    $.fn.drag_drop_multi_select.defaults.after_drop_action = function($item,$old,$new,e,ui){
        // Possible param $item_instance, $old_container, $new_container, event, helper
        var $target = $(e.target);
        
        if ($($target).hasClass('available')) {
          $("input",$item).attr('disabled', 'disabled');
        } else {
          $("input",$item).removeAttr('disabled');
        }        
        
        if ($($item).hasClass('module')){
          module_id = ($item).attr("id")
          if ($($target).hasClass('available')){
            $("."+module_id).show();
            $target.find('ul').append($item);
          }else {
            if ($("li",$target).size() < 2){
              $target.find('ul').append($item);  
              $("."+module_id).hide();              
            }else {
              $("#error_to_many").fadeIn().delay(2000).fadeOut();
              $("input",$item).attr('disabled', 'disabled');
            }            
          }

        } else {
          $target.find('ul').append($item);
          //spreminjanje predmetov.
          module_id = ($item).attr("module_id")
          if ($($target).hasClass('available')){
            //sprostim modul, samo če ni več predmetov, ki imajo ta modul
            if ($("li."+module_id,$("#selected_subjects")).size() <= 3){
              $("#"+module_id).show();
            }
          } else {
            //zasedem modul
            $("#"+module_id).hide();
          }
        }
        

    };
    // Initiate the drag & drop
    $('.drag_drop').drag_drop_multi_select({
        element_to_drag_drop_select:'.list ul li',
        elements_to_drop:'.list',
        elements_to_cancel_select:'.title'
    });
    
    search_setcb('student', function(student){
      url = '/student/subjects_selection/'+student.pk+'/';
      document.location = url;
    });
});
</script>

{% endblock %}

{%block css%}
<link rel="stylesheet" href="{{ MEDIA_URL }}css/jquery.drag_drop_multi_select_alpha.css" />
{% endblock %}

{% block content %}

{% if only_search == False%}
<form method="POST">
<p class="options_panel">
  <button onclick="search_show('student'); return false;">Poišči drugega študenta</button>
  <input type="submit" value="Shrani" />
</p>

{% csrf_token %}
<script type="text/javascript">

$(document).ready(function(){
  url = '{% url student_subjects_selection_sel student.enrollment_number %}';
  $("#selected_year").change(function(){
    selected_value = $('#selected_year option:selected').val();
    document.location = url + "?id="+selected_value;
  })

});

</script>
<p>
  <label>Študijsko leto študenta:</label>
  <select id="selected_year">
    {% for year in available_years %}
      <option {% if selected_year == year.id %} selected="selected" {% endif %} value="{{ year.id }}">{{ year }}</option>
    {% endfor %}
  </select>
</p>
{% include "snippets/student/small_info.htm" %}

<h2>Urejanje modulov študenta</h2>
<div id="error_to_many" class="message error" {% if not error_to_many_modules%} style="display:none"{% endif %} >Preveliko število modulov. Maksimalno 2 modula za posameznega študenta.</div>

<div class="drag_drop">
    <div class="container">
        <div class="list available">
            <div class="title">Seznam modulov na voljo</div>
            <ul>

{% for module in spmod %}
		<li id="m{{ module.pk }}" class="module">{{ module.name }}<input type="hidden" disabled="disabled" name="selected_module" value="{{ module.id }}" /></li>
{% endfor %}
            </ul>
        </div>
        <div class="list" style="height:222px; display: block">
            <div class="title">Seznam izbranih modulov</div>
            <ul id="selected_modules">
{% for module in smod %}
    <li id="m{{ module.program_module.id }}" class="module">{{ module.program_module.name }}<input type="hidden" name="selected_module" value="{{ module.program_module.id }}" /></li>
{% endfor %}
            </ul>
        </div>
        <div class="clear"></div>
    </div>
    <div class="items_selected"></div>
</div>

<h2>Urejanje izbirnih predmetov študenta</h2>
<div class="drag_drop">
    <div class="container">
        <div class="list available">
            <div class="title">Seznam predmetov na voljo</div>
            <ul>
{% for subject in ssubjects %}
		<li module_id="m{{ subject.program_module.pk }}" class="m{{subject.program_module.pk}}">{{ subject.name }}<input type="hidden" disabled="disabled" name="selected_subject" value="{{ subject.code }}" /></li>
{% endfor%}
            </ul>
        </div>
        <div class="list" style="height:550px; display: block">
            <div class="title">Seznam izbranih predmetov</div>
            <ul id="selected_subjects">
{% for subject in selsub %}
    <li module_id="m{{ subject.subject.subject.program_module.pk }}" class="m{{subject.subject.subject.program_module.pk}}">{{ subject.subject.subject.name }}<input type="hidden" name="selected_subject" value="{{ subject.subject.subject.code }}" /></li>
{% endfor %}
            </ul>
        </div>
        <div class="clear"></div>
    </div>
    <div class="items_selected"></div>
</div>
  <input type="submit" value="Shrani" />
</form>
{% else %}
 {% include "snippets/student/search.htm" %}
{% endif %}
{% endblock %}>
